import React from 'react';
import Immutable from 'immutable';
import PropTypes from 'prop-types';
import { ListView } from 'ywen-mobile-ui';
import BaseComponent from '../../components/common/baseComponent.js';
import StationCell from './stationCell';
import { OilStation } from '../../models/oilStation';

class FilterModal extends BaseComponent {
  static propTypes = {
    hasMore: PropTypes.bool.isRequired,
    list: PropTypes.instanceOf(Immutable.List),
    loadMore: PropTypes.func.isRequired,
    openNav: PropTypes.func.isRequired,
    canRefuel: PropTypes.bool.isRequired,
    refuelFunc: PropTypes.func,
    currentStation: PropTypes.instanceOf(OilStation),
  }

  renderFooter = (hasMore) => {
    return (
      <div className="footer">—  {hasMore ? '正在加载' : '没有更多了'}  —</div>
    );
  }

  renderEmpty = (text = '没有相关结果') => {
    return (
      <div className="station-empty">
        <p>{text}</p>
      </div>
    );
  }

  render() {
    const {
      list, hasMore, loadMore, openNav, canRefuel, refuelFunc, currentStation,
    } = this.props;
    const cells = list.map((station, index) => {
      return <StationCell station={station} key={index} type="list" openNav={openNav} canRefuel={canRefuel} refuelFunc={refuelFunc} currentStation={currentStation} />;
    });
    return (
      <ListView
        className="list"
        loadMore={loadMore}
        hasMore={hasMore}
        empty={this.renderEmpty()}
        renderFooter={this.renderFooter}
      >
        {cells}
      </ListView>
    );
  }
}

export default FilterModal;

